<script  lang="ts" setup>
import {showToast} from 'vant';
import headerUtil from "./base/common/headerUtil.vue";
import reqApis from "../req/reqApis.js";

import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const currentData = ref<any>({
  headerObj: {
    showType: 4,
    isRed: false,
  },
  list: []
});


const toDetail = (id:any) => {
  router.push({path: "/productDetail", query: {productId: id}});
};

const searchFn = (text:any) => {
  if(text == "") {
    showToast("搜索内容为空");
    return;
  }
  let params = {
    context: text
  }
  reqApis.getProductLikeApi(params).then(res => {
    currentData.value.list = res.data;
  })
};
    
</script>

<template>
  <section class="search">
    <headerUtil :obj="currentData.headerObj" @myClick="headerFn" @searchClick="searchFn"></headerUtil>
    <div class="content">
      <div @click="toDetail(item.productId)" class="item" v-for="(item ,index) in currentData.list" :key="index">
        {{item.productName}}
      </div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.search {
  width: 3.75rem;
  height: 100%;
  // background: white;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
    .item {
      margin-top: .1rem;
      padding: .1rem;
      font-size: .14rem;
      background: white;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
